<template>
	<view class="content">
		<u-sticky>
			<view class="header" id="header">
				<view class="filter-criteria-box">
					<view class="filter-criteria" @click="openStoreShow()">
						<view>
							{{selectMchStoreName}}
						</view>
						<view class="u-m-l-10">
							<u-icon name="arrow-down" size="12"></u-icon>
						</view>
					</view>
				</view>
				<!-- 场地 -->
				<store ref="store" @storeData="getStore"></store>
			</view>
		</u-sticky>
		<scroll-view scroll-y :style="{ height: height + 'px'}" @scrolltolower="reachBottom">
			<template v-if="list.length > 0">
				<view class="card" v-for="(item,index) in list" :key="index">
					<view class="record">
						<view class="name" v-for="(it,ind) in item.ledgerMerchantRecordVoList" :key="ind">
							<text>{{it.name}}{{it.shareRate}}%
								<text v-if="item.ledgerMerchantRecordVoList.length-1 != ind">，</text></text>
						</view>
					</view>
					<view class="create">
						<view>
							<text>场地：</text><text>{{item.storeName}}</text>
						</view>
						<view>自动到账</view>
					</view>
					<view class="red" v-if="!$u.test.isEmpty(item.failureTime)">
						<text>失效时间：</text><text>{{$u.timeFormat(Date.parse(item.failureTime),'yyyy-mm-dd hh:MM:ss')}}</text></view>
					<view class="green">
						<text>生效时间：</text><text>{{$u.timeFormat(Date.parse(item.entryIntoForceTime),'yyyy-mm-dd hh:MM:ss')}}</text></view>
					<u-gap height="1" bgColor="#D9E2FF"></u-gap>
					<view class="create">
						<view>{{$u.timeFormat(Date.parse(item.createTime),'yyyy/mm/dd hh:MM:ss')}}</view>
						<view>{{item.username}}</view>
					</view>
				</view>
				<u-loadmore :status="loadStatus" height="70rpx" line=true>
				</u-loadmore>
			</template>
			<view v-else>
				<u-empty mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png"></u-empty>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import store from '@/components/store/store.vue'
	export default {
		components: {
			store
		},
		data() {
			return {
				height: 0,
				selectMchStoreName: '全部场地',
				loadStatus: 'nomore', //列表底部加载更多状态
				params: {
					pageNum: 1,
					pageSize: 10,
					totalPage: 1,
					merchantStoreId: ''
				},
				list: [],
			}
		},
		onLoad() {
			this.loadData();
		},
		onReady() {
			this.getPomHeight()
		},
		onPullDownRefresh() {
			this.params.keyword = '';
			this.loadData();
		},
		methods: {
			loadData() {
				this.params.pageNum = 1;
				this.list = [];
				this.ledgerProportionRecord();
			},
			//打开选择场地
			openStoreShow() {
				this.$refs.store.init(true);
			},
			//确定选择场地
			getStore(data) {
				if (data.value == -1) {
					this.selectMchStoreName = '全部场地'
					this.params.merchantStoreId = data.value;
				}else{
					this.selectMchStoreName = data.label;
					this.params.merchantStoreId = data.value;
				}	
				this.loadData();
			},
			//滑动分页
			reachBottom() {
				if (this.params.pageNum >= this.params.totalPage) {
					return;
				}
				this.params.pageNum++;
				console.log("到底部了:", this.params.pageNum);
				this.loadStatus = 'loading'
				this.ledgerProportionRecord()
			},
			//计算高度
			getPomHeight() {
				let query = wx.createSelectorQuery().in(this)
				query.select('#header').boundingClientRect()
				query.exec(res => {
					let windowHeight = wx.getSystemInfoSync().windowHeight
					this.height = windowHeight
					for (let i = 0; i < res.length; i++) {
						this.height -= res[i].height;
					}
				})
			},
			ledgerProportionRecord() {
				uni.showLoading({
					title: '加载中...',
					mask: true
				})
				this.$api('ledgerMerchant.ledgerProportionRecord', this.params).then(res => {
					uni.stopPullDownRefresh();
					uni.hideLoading();
					if (res.status == 0) {
						this.params.pageNum = res.data.pageNum;
						this.params.totalPage = res.data.pages;
						this.loadStatus = res.data.pageNum === res.data.pages ? 'nomore' : 'loadmore';
						if (this.params.totalPage == 0) {
							this.loadStatus = 'nomore';
						}
						this.list = [...this.list, ...res.data.list]; //合并数组
					} else {
						uni.hideLoading();
						this.$helpers.toast('请求数据失败:' + res.msg);
					}
				}).catch(() => {
					uni.stopPullDownRefresh();
					uni.hideLoading();
				})
			},
		}
	}
</script>

<style lang="scss">
	.content {
		padding-bottom: 40rpx;

		.header {
			background-color: white;

			.filter-criteria-box {
				display: flex;
				justify-content: space-around;
				color: rgba(0, 0, 0, 0.7);
				font-size: 26rpx;
				padding: 30rpx 0rpx;

				.filter-criteria {
					display: flex;
					align-items: baseline;

				}
			}
		}

		.card {
			background-color: white;
			border-radius: 20rpx;
			margin: 20rpx 24rpx;
			padding: 10rpx 30rpx;
			font-size: 26rpx;
			line-height: 60rpx;
			letter-spacing: 0.6rpx;

			.record {
				display: flex;

				.name {
					color: rgb(0, 0, 0);
				}
			}

		}

		.create {
			display: flex;
			justify-content: space-between;
			color: rgba(0, 0, 0, 0.7);
		}

		.green {
			color: rgb(7, 193, 96);
		}

		.red {
			color: rgb(254, 64, 76);
		}
	}
</style>
